{{include file="../include/01_head_widget.tpl"}}
<style>
.q230{width: 124px;height: 124px;}
.q460{width: 254px;height: 124px;}
.q690{width: 384px;height: 124px;}
.q460.fix,.q690.fix{width: 124px;height: 124px;}
.jq230{width: 124px;height: 254px;}

.jtit{position: absolute;top: 92px;left: 0;height: 124px;width: 100%;z-index: 3;
      transition: top .25s ease-in-out;
      -moz-transition: top .25s ease-in-out;
      -webkit-transition: top .25s ease-in-out;
      cursor: -webkit-zoom-out;
}
.jtit h4{padding: 8px 12px 0px 12px;color: #9A0E14;font-weight: bold;margin: 0;}
.jtit *{color: #d7d7d7}
.jtit span.bg{position: absolute;top: 0;left: 0;height: 124px;width: 100%;}
.q230 .jtit,.q460 .jtit,.q690 .jtit,.jq230 .jtit{background: #aaa;background: url(/libraries/images/bg/30.png) repeat;}
.q230:hover .jtit,.q460:hover .jtit,.q690:hover .jtit,.jq230:hover .jtit{
    background: url(/libraries/images/bg/70.png) repeat;
    top:0;
}
.q230 .jimg,.q460 .jimg,.q690 .jimg,.jq230 .jimg{width: 100%;height: 100%;position:relative;}
.q230 .jimg,.q460 .jimg img,.q690 .jimg img,.jq230 .jimg img{
    max-width: 100%;max-height: 124px;position:absolute;top:0;bottom:0;right: 0;left: 0;margin:auto;

}
.q230 .jaction,.q460 .jaction,.q690 .jaction,.jq230 .jaction{
    position: absolute;
    bottom: 0;right: 0;height: 28px;width: 100%;
    text-align: center;
}
.q230 .jimg img,.jq230 .jimg img{max-width: 124px;max-height: 124px;position:absolute;top:0;bottom:0;right: 0;left: 0;margin:auto;}
.q230,.q460,.q690,.jq230{
    float: left;margin: 3px;position: relative;overflow: hidden;
    background:#ccc;
}

.q154{width: 153px;height: 153px;}
.q312{width: 310px;height: 153px;}


.q154 .jtit,.q312 .jtit{background: rgba(0,0,0,0.3);}
.q154:hover .jtit,.q312:hover .jtit{background: rgba(0,0,0,0.8);}
.q154 .jimg,.q312 .jimg{width: 100%;height: 100%;position:relative;}
.q154 .jimg,.q312 .jimg img{
    max-width: 100%;max-height: 153px;position:absolute;top:0;bottom:0;right: 0;left: 0;margin:auto;

}
.q154 .jaction,.q312 .jaction{
    position: absolute;
    bottom: 0;right: 0;height: 28px;width: 100%;
    text-align: center;
}
.q154 .jimg img,.jq230 .jimg img{max-width: 153px;max-height: 153px;position:absolute;top:0;bottom:0;right: 0;left: 0;margin:auto;}
.q154,.q312{
    float: left;margin: 2px;position: relative;overflow: hidden;
    background:#ccc;
}

.jbox{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2;}
</style>
<div class="content" style="overflow: hidden; width: 920px; height: 400px;">
    <div class="q460 id-template-box">
        <div class="jimg">
            <img src="http://templates-preview.com/HTML5/300111458/thumb.jpg">
        </div>
        <div class="jtit">

            <h4>
                <a href="">Architectural</a>
            </h4>
            <div style="padding: 0px 20px 12px 20px;">
                <div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div>                    </div>
            <div style="padding: 4px 4px 0 4px;">
                Type :  	 HTML5 templates
                <br>
                Code :       300111458 	<br>
                Architectural                        
            </div>
            <div class="jaction">
                <div class="icon16 hover50 tooltip" title="Xem demo mẫu website tại tab mới.">
                    <a href="http://www.downloads-templates.com/id/598003/300111458" target="_blank"><img src="http://khuong.html-5.me/syslib/icon16/home_1.png"></a>
                </div>
            </div>
        </div>
    </div>

    <div class="q460 id-template-box">
        <div class="jimg">
            <img src="http://templates-preview.com/HTML5/300111457/thumb.jpg">
        </div>
        <div class="jtit">

            <h4>
                <a href="">Green Energy
                </a>
            </h4>
            <div style="padding: 0px 20px 12px 20px;">
                <div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div>                    </div>
            <div style="padding: 4px 4px 0 4px;">
                Type :  	 HTML5 templates
                <br>
                Code :       300111457 	<br>
                Green Energy

            </div>
            <div class="jaction">
                <div class="icon16 hover50 tooltip" title="Xem demo mẫu website tại tab mới.">
                    <a href="http://www.downloads-templates.com/id/598003/300111457" target="_blank"><img src="http://khuong.html-5.me/syslib/icon16/home_1.png"></a>
                </div>
            </div>
        </div>
    </div>

    <div class="q460 id-template-box">
        <div class="jimg">
            <img src="http://templates-preview.com/HTML5/300111456/thumb.jpg">
        </div>
        <div class="jtit">

            <h4>
                <a href="">Tattoo Salon
                </a>
            </h4>
            <div style="padding: 0px 20px 12px 20px;">
                <div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div>                    </div>
            <div style="padding: 4px 4px 0 4px;">
                Type :  	 HTML5 templates
                <br>
                Code :       300111456 	<br>
                Tattoo Salon

            </div>
            <div class="jaction">
                <div class="icon16 hover50 tooltip" title="Xem demo mẫu website tại tab mới.">
                    <a href="http://www.downloads-templates.com/id/598003/300111456" target="_blank"><img src="http://khuong.html-5.me/syslib/icon16/home_1.png"></a>
                </div>
            </div>
        </div>
    </div>

    <div class="q230 id-template-box">
        <div class="jimg">
            <img src="http://templates-preview.com/HTML5/300111455/thumb.jpg">
        </div>
        <div class="jtit">

            <h4>
                <a href="">Carpenter
                </a>
            </h4>
            <div style="padding: 0px 20px 12px 20px;">
                <div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div>                    </div>
            <div style="padding: 4px 4px 0 4px;">
                Type :  	 HTML5 templates
                <br>
                Code :       300111455 	<br>
                Carpenter

            </div>
            <div class="jaction">
                <div class="icon16 hover50 tooltip" title="Xem demo mẫu website tại tab mới.">
                    <a href="http://www.downloads-templates.com/id/598003/300111455" target="_blank"><img src="http://khuong.html-5.me/syslib/icon16/home_1.png"></a>
                </div>
            </div>
        </div>
    </div>

    <div class="q230 id-template-box">
        <div class="jimg">
            <img src="http://templates-preview.com/HTML5/300111454/thumb.jpg">
        </div>
        <div class="jtit">

            <h4>
                <a href="">DJ Music
                </a>
            </h4>
            <div style="padding: 0px 20px 12px 20px;">
                <div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div>                    </div>
            <div style="padding: 4px 4px 0 4px;">
                Type :  	 HTML5 templates
                <br>
                Code :       300111454 	<br>
                DJ Music

            </div>
            <div class="jaction">
                <div class="icon16 hover50 tooltip" title="Xem demo mẫu website tại tab mới.">
                    <a href="http://www.downloads-templates.com/id/598003/300111454" target="_blank"><img src="http://khuong.html-5.me/syslib/icon16/home_1.png"></a>
                </div>
            </div>
        </div>
    </div>

    <div class="q460 id-template-box">
        <div class="jimg">
            <img src="http://templates-preview.com/HTML5/300111447/thumb.jpg">
        </div>
        <div class="jtit">

            <h4>
                <a href="">Pro Business
                </a>
            </h4>
            <div style="padding: 0px 20px 12px 20px;">
                <div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div>                    </div>
            <div style="padding: 4px 4px 0 4px;">
                Type :  	 HTML5 templates
                <br>
                Code :       300111447 	<br>
                Pro Business

            </div>
            <div class="jaction">
                <div class="icon16 hover50 tooltip" title="Xem demo mẫu website tại tab mới.">
                    <a href="http://www.downloads-templates.com/id/598003/300111447" target="_blank"><img src="http://khuong.html-5.me/syslib/icon16/home_1.png"></a>
                </div>
            </div>
        </div>
    </div>

    <div class="q230 id-template-box">
        <div class="jimg">
            <img src="http://templates-preview.com/HTML5/300111438/thumb.jpg">
        </div>
        <div class="jtit">

            <h4>
                <a href="">Private Lawyer</a>
            </h4>
            <div style="padding: 0px 20px 12px 20px;">
                <div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div>                    </div>
            <div style="padding: 4px 4px 0 4px;">
                Type :  	 HTML5 templates
                <br>
                Code :       300111438 	<br>
                Private Lawyer                        
            </div>
            <div class="jaction">
                <div class="icon16 hover50 tooltip" title="Xem demo mẫu website tại tab mới.">
                    <a href="http://www.downloads-templates.com/id/598003/300111438" target="_blank"><img src="http://khuong.html-5.me/syslib/icon16/home_1.png"></a>
                </div>
            </div>
        </div>
    </div>

    <div class="q230 id-template-box">
        <div class="jimg">
            <img src="http://templates-preview.com/HTML5/300111437/thumb.jpg">
        </div>
        <div class="jtit">

            <h4>
                <a href="">Communication
                </a>
            </h4>
            <div style="padding: 0px 20px 12px 20px;">
                <div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div><div class="rsw-starred"></div>                    </div>
            <div style="padding: 4px 4px 0 4px;">
                Type :  	 HTML5 templates
                <br>
                Code :       300111437 	<br>
                Communication

            </div>
            <div class="jaction">
                <div class="icon16 hover50 tooltip" title="Xem demo mẫu website tại tab mới.">
                    <a href="http://www.downloads-templates.com/id/598003/300111437" target="_blank"><img src="http://khuong.html-5.me/syslib/icon16/home_1.png"></a>
                </div>
            </div>
        </div>
    </div>

</div>